<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>业务审核</el-breadcrumb-item>
			<el-breadcrumb-item>实名认证审核</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片布局 -->
		<el-card class="box-card">
			<!-- 搜索框 -->
			<el-row :gutter="20">
				<el-col :span="6">
					<!-- 模糊搜索框 -->
					<el-input placeholder="请输入查询条件" class="input-with-select" clearable @clear="select"
						v-model="queryinfo.name">
						<el-button slot="append" icon="el-icon-search" @click="select">查询</el-button>
					</el-input>
				</el-col>
			</el-row>
			<el-table :data="cards"  border style="width: 100%;">
				<el-table-column type="index" label="" width="100">
				</el-table-column>
				<el-table-column prop="username" label="申请账户" width="100">
				</el-table-column>
				<el-table-column prop="name" label="申请人" width="100">
				</el-table-column>
				<el-table-column  label="资质图片" width="200">
					<template slot-scope="scope">
						<el-image style="width: 60px; height: 50px" :src="imgurl+scope.row.comfirmimg" :fit="fit"></el-image>
					</template>
				</el-table-column>
				<el-table-column prop="idcard" label="申请人身份证号" width="200">
				</el-table-column>
				<el-table-column prop="phone" label="手机号码" width="150">
				</el-table-column>
				<el-table-column  label="审核状态" width="100">
				<template slot-scope="scope">
					<div v-show="scope.row.status==0" style="color: orange;">审核中</div>
					<div v-show="scope.row.status==1" style="color: green;">审核通过</div>
					<div v-show="scope.row.status==2" style="color: red;">未通过</div>
				</template>
				</el-table-column>
				<el-table-column label="操作">
					<!-- 作用域插槽 -->
					<template slot-scope="scope">
						<el-button type="success" icon="el-icon-edit-outline" size="mini" @click="updateCard(scope.row.id)">
						</el-button>
						<el-button type="danger" icon="el-icon-delete" size="mini" @click="delCard(scope.row.userid)">
						</el-button>
					</template>
				</el-table-column>

			</el-table>
			<!-- size-change:每页显示的条数改变时触发的函数
			      current-change：当前页码改变时触发的函数
		    -->
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="queryinfo.pagenum" :page-sizes="[1, 2, 4, 5]" :page-size="queryinfo.pagesize"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<!--  审核未通过原因说明对话框-->
			<el-dialog title="审核未通过原因说明" :visible.sync="reasonDialog" :before-close="shutReason">
				<div>
					<span>管理员你好，该用户实名认证未通过审核，请填写原因</span>
				</div>
				<div>
					<el-form :model="reasons" ref="reasonRef">
						<el-form-item label="审核失败原因">
							<el-input v-model="reasons.reason"></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="shutReason" type="info">取消</el-button>
						<el-button @click="submitReason" type="primary">确定</el-button>
					</span>
				</div>
				
			</el-dialog>
		</el-card>


	</div>
</template>

<script>
	// 引入qs依赖
	import qs from 'qs';
	export default {
		data() {
			return {
				// 查询条件信息
				queryinfo: {
					name: '', //姓名模糊查询
					pagenum: 1, //访问的页码
					pagesize: 4 //默认每页展示的条数
				},
				//保存查询到的用户信息
				cards:[],
				// 总条数
				total: 0,
				// status:3,
				updateCards:'',
				imgurl: 'http://localhost:8888/crowdfunding_system_war_exploded/showimg?filename=',
				reasonDialog:false,
				// 填写实名认证审核失败原因
				reasons:{
					reason:''
				},
				// 保存后端查询的对象
				idCards:{
					
				}
				
			}
		},
		methods: {
			// 查询所有数据
			async showCard() {

				var res = await this.$http.post("selectCard", qs.stringify(this.queryinfo));
				// console.log(res)
				if (res.data.code == 400) {
					this.$message.error(res.data.message);
				} else {
					console.log(res.data);
					this.cards = res.data.data.list;	
					this.total = res.data.data.total;
					
				}
			},
			// 根据用户名模糊查询
			select() {
				this.queryinfo.pagenum = 1;
				this.showCard()
			},
			// 每页条数改变的函数
			handleSizeChange(newpagesize) {

				this.queryinfo.pagesize = newpagesize;
				this.queryinfo.pagenum = 1;
				this.showCard()
			},
			// 改变查询页数的函数
			handleCurrentChange(newpagenum) {
				this.queryinfo.pagenum = newpagenum;
				this.showCard()
			},
			
			updateCard(id){
				this.$confirm('是否确定该用户通过审核?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'success'
				}, ).then(async () => {
					var res = await this.$http.get('updateCard?id=' + id);
					if (res.data.code == 200) {
						this.$message.success(res.data.message);
						this.showCard();
					} else {
						this.$message.error(res.data.message);
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
				},
				// 填写实名认证审核失败原因
				async submitReason(){
					let param = new URLSearchParams
					param.append("id",this.idCards.id)
					param.append("reason",this.reasons.reason)
					let res = await this.$http.post('updateReason',param)
					if(res.data.code == 200){
						this.$message.success('审核完成')
						this.$refs.reasonRef.resetFields()
						this.reasonDialog=false
						this.$http.post('delCard?id=' + this.idCards.id)
						this.showCard()
					}else{
						this.$message.error('审核失败')
					}
					
				},
				// 前往reasonDialog填写原因的方法
				async delCard(id){
					this.reasonDialog=true
					let res = await this.$http.post('selectICById?id='+id)
					if(res.data.code==200){
						this.idCards = res.data.data
					}else{
						this.$message.error(res.data.message)
					}
				},
				// 关闭reason对话框
				shutReason(){
					this.$refs.reasonRef.resetFields()
					this.reasonDialog=false
				}
				

		},
		mounted() {
			this.showCard()
		}
	}
</script>

<style scoped="scoped">

</style>
